<template>
	<view>
		<!-- 顶部导航 -->
		<scroll-view class="top_nav" scroll-x enable-flex
			:scroll-into-view="`cate-${titleIndex > 2 ? titleIndex - 2 : -1}`" scroll-with-animation
			v-if="order_type==1||order_type==3">
			<view class="item" v-for="item in tabbar" :key="item.id" :id="`cate-${item.id}`">
				<view class="item_view " :class="titleIndex == item.id ? 'active' : ''" @click="topNav(item)">
					<view v-if="order_type==1">{{ item.value }}</view>
					<view v-if="order_type==3">{{ item.jifen }}</view>
					<view class="gun"></view>
				</view>
			</view>
		</scroll-view>
		<scroll-view class="top_nav" scroll-x enable-flex
			:scroll-into-view="`cate-${titleIndex > 2 ? titleIndex - 2 : -1}`" scroll-with-animation
			v-if="order_type==2" style="display: flex;justify-content: space-between;">
			<view class="item" v-for="item in acttabbar" :key="item.id" :id="`cate-${item.id}`">
				<view class="item_view " :class="titleIndex == item.id ? 'active' : ''" @click="topNav(item)">
					<view v-if="currindex==0">{{ item.value }}</view>
					<view v-else>{{ item.jifen }}</view>
					<view class="gun"></view>
				</view>
			</view>
		</scroll-view>
		<!-- 自提 -->
		<scroll-view class="top_nav" scroll-x enable-flex
			:scroll-into-view="`cate-${titleIndex > 2 ? titleIndex - 2 : -1}`" scroll-with-animation
			v-if="order_type==4||order_type==5">
			<view class="item" v-for="item in selftabbar" :key="item.id" :id="`cate-${item.id}`">
				<view class="item_view " :class="titleIndex == item.id ? 'active' : ''" @click="topNav(item)">
					<view v-if="order_type==4||order_type==5">{{ item.value }}</view>
					<view class="gun"></view>
				</view>
			</view>
		</scroll-view>

		<None v-if="!list.length && !loading && isEnd"></None>
		<!-- 商品状态 -->
		<view class="goods_status" v-for="(item, index) in list" :key="`order-${item.id}`">
			<view class="number" v-if="item.goods[0]">
				<view class="left"><text>订单编号：</text><text>{{ item.order_sn }}</text></view>
				
				<!-- order_type  order_type 1 商品购买订单  2到店支付订单  3外卖订单 -->
				<!-- 商城 -->
				<view class="right" v-if="item.order_type==1&&order_type==1">{{ item.status | statusFilter }}</view>
				<!-- 到店 -->
				<view class="right" v-if="item.order_type==2&&order_type==2">
					{{ item.status==0?'待付款':item.status==6?'已完成':item.status==5?'售后退款中':item.status==7?'售后完成':''}}</view>
				<!-- 外卖 -->
				<view class="right" v-if="item.order_type==3&&order_type==3">
					{{ item.status==0?'待付款':item.status==1?'准备中':item.status==2?'配送中':item.status==3?'已送达':item.status==5?'售后退款中':item.status==7?'售后完成':''}}
				</view>
				<!-- 自提 -->
				<view class="right" v-if="(item.order_type==4||item.order_type==1||item.order_type==5)&&item.delivery_method==2">
					{{ item.status==0?'待付款':item.status==1?'待核销':item.status==2?'已核销':item.status==3?'待评价':item.status==5?'售后退款中':item.status==7?'售后完成':''}}
				</view>
			</view>
			<view class="number" style="margin-top: 20rpx;" v-if="item.store_name">
				<view class="left"><text>{{item.store_name}}</text></view>
			</view>
			<view class="info" @click="todetail(list[index].id)" v-for="(ite, inde) in item.goods" :key="inde">
				<image :src="ite.url||ite.merch_log"></image>
				<view class="title">
					<view class="title_item">
						<view class="title_left">{{ ite.goods_name||ite.merch_name }}</view>
						
						<!-- v-if="item.order_type==1" -->
						<view class="title_right">
							<text>￥{{ ite.goods_price ||item.pay_money}}</text>
							<text v-if="ite.goods_num">X{{ ite.goods_num ||item.goods_num}}</text>
						</view>
						<!-- <view class="title_right" v-else>
							<text>{{ ite.goods_price }}积分</text>
							<text>X{{ ite.goods_num }}</text>
						</view> -->
					</view>
					<view class="small_title">{{ ite.spec_name }}</view>
				</view>
			</view>
			<view class="price">下单时间：{{item.addtime}}</view>
			
			<view class="price" v-if="item.pick_time&&item.pick_time>0">{{item.pick_time}}</view>
			<!-- v-if="item.order_type==1" -->
			<view class="price"><text
					v-if="item.order_type!==2">共{{ getTotal(item.goods) }}件商品</text><text>付款：￥{{ item.pay_money }}</text>
			</view>
			<view class="price" v-if="parseFloat(item.coupon_money*100)/100>0"><text>优惠金额：￥{{ item.coupon_money }}</text>
			</view>
			<!-- <view class="price" v-else><text>共{{ getTotal(item.goods) }}件商品</text><text>需{{ item.pay_money }}积分</text></view> -->
			<view class="btns" v-if="item.status !== 4">
				<!-- //0待付款 1待发货/待自提 2待收货/已自提 3待评价  4已取消  5售后退款中  6已完成  7售后完成 -->
				<!-- order_type  1 供应商订单  2到店支付订单  3外卖订单 4自提订单 -->
				<!-- 配送方式 delivery_method 1快递 2自提 -->
				<!-- 到店退款 -->
				<view class="btn_left" v-if="item.order_type==2&&(item.status==1||item.status==6)"
					@click="toreturnmoney(list[index])">申请退款</view>
				<!-- 自提订单退款 -->
				<view class="btn_left" v-if="(item.order_type==4||item.order_type==5)&&item.status==1" @click="toreturnmoney(list[index])">
					申请退款</view>
				<view class="btn_left" v-if="item.status == 1&&item.goods[0].goods_name&&(item.order_type==4||item.order_type==5)"
					@click.stop="navOrderDatails(list[index])">出示核销码</view>
				<view class="btn_left" v-if="item.status == 0&&item.goods[0].goods_name&&item.order_type!==2"
					@click.stop="cancelOrder(list[index].id)">取消订单</view>
				<view class="btn_left" v-if="(item.status == 2||item.status == 3)&&item.goods[0].goods_name&&item.order_type==1"
					@click.stop="logistics(list[index])">查看物流</view>
				<view class="btn_left" v-if="item.status == 2&&item.goods[0].goods_name&&item.order_type==1"
					@click.stop="confirmorder(list[index].id)">确认收货</view>
				<view class="btn_left" v-if="item.status == 3&&item.goods[0].goods_name"
					@click="appraise(list[index].id)">发表评价</view>
				<!-- 商品退款 -->
				<view class="btn_left"
					v-if="item.settle_status==0&&item.goods[0].goods_name&&item.status!==0&&item.status<3&&item.order_type==1"
					@click="toservice(list[index].id)">申请售后</view>
				<!-- 外卖订单退款, -->
				<view class="btn_left"
					v-if="item.goods[0].goods_name&&(item.status==1||item.status==0)&&item.order_type==3"
					@click="toservice(list[index].id)">申请售后</view>
					<view class="btn_left" style="padding: 0 20rpx;"
						v-if="item.goods[0].goods_name&&(item.status==5)&&!item.orderItem[0].afterSaleexpressCode&&item.ref_type==1"
						@click="filllogistics(list[index])">填写物流单号</view>
						<view class="btn_left" style="padding: 0 20rpx;"
							v-if="item.goods[0].goods_name&&(item.status==5)&&item.ref_status==1&&item.ref_type==1"
							@click="filllogistics(list[index])">填写物流单号</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="zzc" v-if="isShowEwm" @click="isShowEwm = false"></view>
		<!-- 隐藏的二维码 -->
		<view class="hide_ewm" v-if="isShowEwm">
			<image class="shut" src="../../static/gb.png" @click="isShowEwm = false"></image>
			<view class="title_box">请营业时间内到店核销</view>
			<view class="line"></view>
			<image :src="'https://zdcloud.zxkjnc.com'+itemcode.pick_code" class="ewm"></image>
			<view class="number">
				<text>订单号</text>
				<text>{{itemcode.order_sn}}</text>
			</view>
		</view>
		<!-- 取消订单 -->
		<cancelOrderCom ref="cancel" @cancel="cancelDone" @newlist="getList"></cancelOrderCom>
	</view>
</template>

<script>
	import None from '../../components/kong.vue';
	import cancelOrderCom from '../../components/cancelOrder.vue';
	export default {
		components: {
			None,
			cancelOrderCom
		},
		data() {
			return {
				// 二维码是否显示
				isShowEwm: false,
				titleIndex: -1,
				acttabbar: [{
					id: -1,
					value: '全部'
				}, {
					id: 0,
					value: '待付款'
				}, {
					id: 6,
					value: '已完成'
				}, {
					id: 5,
					value: '退款/售后'
				}],
				//0待付款 1待发货 2待收货 3待评价 4已取消 5售后退款中 6已完成 7售后完成 为空默认全部
				//0待付款 1待发货/待自提 2待收货/已自提 3待评价  4已取消  5售后退款中  6已完成  7售后完成delivery_method
				tabbar: [{
					id: -1,
					value: '全部',
					jifen: '全部',
				}, {
					id: 0,
					value: '待付款',
					jifen: '待付款',
				}, {
					id: 1,
					value: '待发货',
					jifen: '准备中',
				}, {
					id: 2,
					value: '待收货',
					jifen: '配送中',
				}, {
					id: 3,
					value: '已收货',
					jifen: '已送达',
				}, {
					id: 5,
					value: '退款/售后',
					jifen: '退款/售后',
				}, ],
				list: [],
				page_index: 1,
				loading: false,
				isEnd: false,
				itemcode: {},
				currindex: '',
				sourcelist: ['平台', '会员', '代理商'], //商品来源0平台 1会员 2代理商
				order_type: '',
				delivery_method: '',
				selftabbar: [{
					id: -1,
					value: '全部'
				}, {
					id: 0,
					value: '待付款'
				}, {
					id: 1,
					value: '待核销'
				}, {
					id: 2,
					value: '已核销'
				}, {
					id: 3,
					value: '待评价'
				}, {
					id: 5,
					value: '退款/售后'
				}],
			};
		},
		onBackPress() {  
		   if(this.showMask) {  
		     this.showMask = false;  
		     return true;  
		   }else{  
		      uni.showModal({  
		        title: '提示',  
		        content: '是否退出uni-app？',  
		        success: function(res) {  
		            if (res.confirm) {  
		                // 退出当前应用，改方法只在App中生效  
		                plus.runtime.quit();  
		            } else if (res.cancel) {  
		                console.log('用户点击取消');  
		            }  
		        }  
		      });  
		      return true  
		   }  
		},
		watch: {
			titleIndex() {
				this.init()
			}
		},
		filters: {
			statusFilter(val) {
				let arr = ['待付款', '待发货', '待收货', '待评价', '已取消', '售后退款中', '已完成', '售后完成']
				return arr[val]
			},

		},
		onLoad(option) {
			
			if(option.order_type==2&&option.type==1){
				this.titleIndex = 6
			}else if(option.order_type==2&&option.type==2){
				this.titleIndex = 5
			}else if(option.order_type==3&&option.type==1){
				this.titleIndex = 2
			}else if(option.order_type==3&&option.type==2){
				this.titleIndex = 3
			}else{
				this.titleIndex = option.type
			}
			this.currindex = option.currindex //0==物流订单，1==自提订单
			this.order_type = option.order_type
			this.delivery_method = option.delivery_method || '' //配送方式 1快递 2自提
			console.log(option, 'option',option.type,'option.type',this.titleIndex)
			this.getList()
		},
		onReachBottom() {
			this.getList()
		},
		async onPullDownRefresh() {
			await this.init()
			uni.stopPullDownRefresh()
		},
		methods: {
			gettime: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},
			cancelDone() {
				uni.showToast({
					title: '取消成功',
					icon: 'success',
					mask: true
				})
			},
			// 取消订单
			cancelOrder(id) {
				this.$refs.cancel.open(id)
			},
			// 顶部导航点击事件
			topNav(item) {
				this.titleIndex = item.id
			},
			// 自提码
			navOrderDatails(item) {

				this.itemcode = item
				if (!this.itemcode.pick_code) {
					return
				}
				this.isShowEwm = true
			},
			todetail(id) {
				console.log(id, 'id')
				uni.navigateTo({
					url: "/personalData/orderDetails/orderDetails?id=" + id
				})
			},
			// 查看物流按钮
			logistics(item) {
				uni.navigateTo({
					url: "/pageshop/logistics/logistics?info="+encodeURIComponent(JSON.stringify(item))
				})
			},
			// 发表评价按钮
			appraise(id) {
				uni.navigateTo({
					url: "/pageshop/appraise/appraise?id=" + id
				})
			},
			getTotal(list) {
				if (list.length == 0) {
					return 0
				}
				return list.map(item => item.goods_num).reduce((a, b) => {
					return a + b
				})
			},
			async getList() {
				if (this.loading || this.isEnd) return
				this.loading = true
				try {
					let res = await this.$http({
						url: 'api/Wechat/orderList',
						data: {
							page_index: this.page_index,
							status: this.titleIndex < 0 ? '' : this.titleIndex,
							page_size: 12,
							delivery_method: this.delivery_method || '', //是否自提1否 2是//1商城订单 2积分订单 3外卖订单
							order_type: this.order_type == 4 ? 1 : this.order_type //1 商品购买订单  2到店支付订单  3外卖订单
						}
					})
					this.list = this.list.concat(res.data)
					this.page_index++
					this.isEnd = res.data.length < 12
					console.log(this.list)
				} catch (err) {

				} finally {
					this.loading = false
				}
			},
			async init() {
				this.page_index = 1
				this.list = []
				this.isEnd = false
				await this.getList()
			},
			//物流单号
			filllogistics(item){
				uni.navigateTo({
					url:'/pageshop/filllogistics/filllogistics?info='+encodeURIComponent(JSON.stringify(item))
				})
			},
			//确认收货
			confirmorder(id) {
				this.$http({
					url: 'api/Wechat/shipOrder',
					data: {
						token: uni.getStorageSync('token'),
						order_id: id
					}
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						this.init()
					}, 1500)
				})
			},
			toservice(id) {
				uni.navigateTo({
					url: '/personalData/aftersale/aftersale?id=' + id
				})
			},
			//退款
			toreturnmoney(info) {
				console.log(info, 'info')
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定申请退款吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								uni.showLoading({
									title: '加载中',
									mask: true
								})
								await this.$http({
									url: 'api/Wechat/afterSale',
									data: {
										orderid: info.id,
										refound_money: info.pay_money
									}
								}).then(msg => {
									setTimeout(()=>{
										uni.showToast({
											title: msg.msg,
											icon: 'none',
											duration:2000
										})
									},100)
									this.page_index = 1,
										this.loading = false,
										this.isEnd = false,
										this.list = []
									this.getList()
									uni.hideLoading()
									
								})
								// that.getList()
							} catch {
								uni.hideLoading()
							} finally {
								// that.getList()
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 遮罩层
	.zzc {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background-color: #000;
		opacity: .6;
	}

	// 隐藏的二维码
	.hide_ewm {
		width: 607rpx;
		height: 727rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 70rpx 38rpx 70rpx;
		box-sizing: border-box;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.shut {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			top: 46rpx;
			right: 32rpx;
		}

		.title_box {
			height: 128rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 33rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
		}

		.line {
			width: 100%;
			height: 2rpx;
			background: #EEEEEE;
		}

		.ewm {
			width: 426rpx;
			height: 426rpx;
		}

		.number {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0 24rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;

			:first-child {
				color: #666666;
			}

			:last-child {
				color: #333333;
			}
		}
	}

	// 顶部导航
	.top_nav {
		display: flex;
		background-color: #fff;
		height: 76rpx;
		width: 100%;
		border-radius: 0 0 10rpx 10rpx;

		.item {
			width: 20%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			height: 100%;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;

			.item_view {
				height: 100%;
				display: inline-block;
				position: relative;
				line-height: 76rpx;

				color: #222222;

			}

			.active {

				color: #F94D29;

				.gun {
					width: 100%;
					height: 4rpx;
					background: linear-gradient(180deg, #F94D29 0%, #F99529 100%);
					border-radius: 2rpx 2rpx 2rpx 2rpx;
					position: absolute;
					bottom: 0;
				}
			}
		}
	}

	// 商品状态
	.goods_status {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 38rpx 32rpx 24rpx 28rpx;
		box-sizing: border-box;


		.number {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;

				:first-child {
					color: #555555;
				}
			}

			.right {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #F94D29;
			}
		}

		.info {
			height: 160rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 36rpx;
			gap: 0 28rpx;

			image {
				width: 160rpx;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				flex-shrink: 0;
			}

			.title {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				.title_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 0 58rpx;

					.title_left {
						font-size: 30rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #222222;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						line-height: 1em;
					}

					.title_right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-end;

						:first-child {
							font-size: 28rpx;
							font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
							font-weight: normal;
							color: #222222;
							line-height: 1em;
						}

						:last-child {
							font-size: 24rpx;
							font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
							font-weight: normal;
							color: #555555;
							line-height: 1em;
							margin-top: 20rpx;
						}
					}
				}

				.small_title {
					font-size: 26rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;
					line-height: 1em;
				}
			}
		}

		.price {
			text-align: end;
			margin-top: 50rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
			line-height: 1em;

			:first-child {
				color: #555555;
			}
		}

		.btns {
			display: flex;
			justify-content: flex-end;
			flex-wrap: wrap;
			align-items: center;
			gap: 0 20rpx;
			margin-top: 46rpx;

			.btn_left {
				width: 170rpx;
				height: 64rpx;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: 2rpx solid #888888;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				flex-shrink: 0;
			}

			.btn_right {
				width: 170rpx;
				height: 64rpx;
				background: rgba(0, 0, 0, 0);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: 2rpx solid #F94D29;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #F94D29;
				flex-shrink: 0;
			}
		}
	}
</style>